<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%String path = request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据选择页面</title>

<link href="bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script src="bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
		$("#tableName").change(function(){
			
		//	console.log($("#column div").length)
			
			$("#column div").each(function(){
				$(this).hide();
			});
			
			if($(this).val().length<1){
				alert("请选择表名");
				return;
			}else{
				var id="#"+$(this).val();
			 
				$(id).show();
			 
			}
		});
		
		$("#determine").click(function(){
			$("#column div").each(function(){
				 if($(this).is(':visible')){
				//	 console.log($(this).attr("id"));//获取到表名
					 var tableName=$(this).attr("id");
					var mes=" <div class='col-xs-6 col-sm-3' id='tables'> <a  class='list-group-item active' > "+
					"<h4 class='list-group-item-heading'> "+
			 			tableName+
				      "<input type='button' class='btn btn-info btn-xs' value='预览sql' data-toggle='modal' data-target='#myModal' onclick='showsql("+tableName+")'>"+
				      "</h4>  </a>"+
				 	  "<a   class='list-group-item' id='sql_"+tableName+"'>";
					 $(this).find("input").each(function(){
						 if($(this).attr("checked")){
							console.log($(this).val());
									mes=mes+" <p class='list-group-item-text'>"+$(this).val()+"</p>"; 
						 }
					 });
					 mes=mes+"</a></div>"
					 $("#main").append(mes);
				 }
					
			});
		});
});
function showsql(name){
	 var tableName=$(name).attr("id");
	 var id="#sql_"+tableName;
	  console.log($(id).find("p").length);
	  var sql="select ";
	  var size= $(id).find("p").length-1;
	$(id).find("p").each(function(i){
		console.log($(this).text());
	    
	    if(i==size){
	    	sql=sql+$(this).text()  
	    }else{
	    	sql=sql+$(this).text() +", "
	    }
	});
	 sql=sql+"  from " +tableName;
	 $("#showSql").html("");
	 $("#showSql").append(sql);
};

function testSql(){
	 var url="SqlTest?sql="+ $("#showSql").text();
	$.get(url,function(mes){
	 		var is=$.parseJSON(mes) ;
		if(is.is){
			alert("成功");
		}else{
			alert("失败");
		}
	});
	console.log();
}

function createPie(){
	/* var data=$("#create").serialize();
	console.log(data);
	$.post("",data,function(){
		
	}); */
	$("#create").submit();
}
</script>
</head>
<body>
 
	<div style="padding: 20px 100px 10px;" id="main">
		<div class="col-xs-6 col-sm-3">
			<select id="tableName" class="form-control " >
				<option value="">请选择要配置的表和字段</option>
				<c:forEach var="bean" items="${list}">
					<option value="${bean.name}">${bean.name}</option>
				</c:forEach>
			</select>
	
			<div id="column" style="width: 50%">
				<c:forEach var="bean" items="${list}">
					<div style="display: none;" id="${bean.name}">
						<c:forEach items="${bean.column}" var="column">
							<input type="checkbox" value="${column}">${column}<br />
						</c:forEach>
					</div>
				</c:forEach>
			</div>
		</div>	
		
		<div class="col-xs-6 col-sm-2">
			<input type="button" value="确定表和字段" class="btn btn-primary" id="determine">
		</div>
	</div>
	<jsp:include page="data_from.jsp"></jsp:include>	
</body>
</html>